<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
			/*去掉 mui-card-header 下面的线*/
			.mui-card-header:after{
				height:0;
			}
		</style>
	</head>

	<body>
		<!--顶部搜索框-->
		<header class="mui-bar mui-bar-nav">
            <div class="mui-bar mui-bar-standard">
                <div class="mui-input-row mui-search">
             		<input id="search" type="search" class="mui-input-clear" placeholder="搜索 医生/朋友">
                </div>
            </div>
        </header>
        
        <!--弹出菜单 (默认隐藏)-->
		<div id="popover" class="mui-popover">
		</div>
		
		<!--好友列表-->
		<div class="mui-content mui-scroll-wrapper">
	        <ul class="mui-scroll mui-table-view" id="chatlist" style="margin-top: 0px;padding:0px;">
	        </ul>
		</div>
		
		<!--HTML模板（弹出菜单）-->
		<script id="search-template" type="text/html">
			{{ each items item }}
			<div class="mui-card-header mui-card-media" id="{{item._id}}">
				<img src="./images/logo.png"/>
				<div class="mui-media-body">
					<span>{{item.name}}（{{item.nickname}}）</span>
					<p>{{item.introduction}}</p>
				</div>
			</div>
	    	{{ /each }}
    	</script>
    	
		<!--HTML模板（好友列表）-->
		<script id="chatlist-template" type="text/html">
			{{ each items item }}
			<li class="mui-table-view-cell mui-transitioning">
				<div class="mui-slider-right mui-disabled">
					<a class="mui-btn mui-btn-red" style="transform: translate(0px, 0px);" id="{{item._id}}">删除</a>
				</div>
				<div class="mui-card-header mui-card-media mui-slider-handle" id="{{item._id}}">
					<img src="./images/logo.png" />
					<div class="mui-media-body">
						<span style="font-size: 16px;">{{item.name}}（{{item.nickname}}）</span>
						<p>{{item.introduction}}</p>
					</div>
				</div>
			</li>
			{{ /each }}
		</script>
		
		<script src="js/mui.min.js"></script>
		<script src="js/template-web.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init();
			
			var addTip = function(){
				var tip = document.getElementById('tip');
				if (tip == null){
					// 没有好友且没有添加过tip的时候添加 tip 提示
					var chatlist = document.getElementById('chatlist');
					var tip = document.createElement("p");
					tip.innerHTML = '您还没有聊天记录呢，可以找找朋友呦 ↑~';
					tip.setAttribute('id','tip');
					tip.setAttribute('style','text-align: center;margin-top: 5px;');
					chatlist.parentNode.appendChild(tip);
				}
			}
			var removeTip = function(){
				// 删除 tip
				var tip = document.getElementById('tip');
				if (tip != null){
					tip.parentNode.removeChild(tip);
				}
			}
			// 刷新好友列表函数
			var refreshChatList = function(){
				
				// 获取好友列表数据
				var state = app.getState();
				if(state.hasOwnProperty('chatList'))
					var chatList = state.chatList;
				else
					var chatList = [];
				// 更新页面的好友列表HTML
				var chatlist = document.getElementById('chatlist');
				if (chatList.length==0){
					// 添加 tip
					addTip();
				}
				else{
					// 移除 tip
					removeTip();
					// 列表中添加聊天对象
					var html = template('chatlist-template', {'items':chatList});
					chatlist.innerHTML = html;
				}
				// 清除搜索框的输入值
				document.getElementById('search').value = '';
				document.getElementById('search').blur();
				// 隐藏搜索框的弹出菜单
	      		mui('#popover').popover('hide');
	      		
				// 监听左滑删除事件
				mui('.mui-disabled').on('tap','a',function(e){
					// 获得用户id
					var delID = e.target.getAttribute('id');
					// 从列表中找到该用户并删除
					var state = app.getState();
					for (var i = 0 ; i < state.chatList.length ; i++){
						if( delID == state.chatList[i]._id ){
							state.chatList.splice(i,1);
						}
					}
					// 写回本地 
					app.setState(state);
					// 在HTML中删除该节点
          			var li=this.parentNode.parentNode;
					li.parentNode.removeChild(li);
					
					if (state.chatList.length==0){
						addTip();
					}
				});
			};
			
			mui.plusReady(function(){
				// 刷新好友列表函数
				refreshChatList();
				
			    //预加载 im 页
			    mui.preload({
			        url: 'im.html',
			        id: 'im.html',
			        styles: {
			            "render": "always",//一直渲染
			            "popGesture": "hide"
			        }
			    });
			    
		     	// 监听滑动事件
//		     	var changeTab = function(curTab, targetTab, targetTabTitle){
//		      		var curWebview = plus.webview.currentWebview();		     		
//		      		var targetWebview = plus.webview.getWebviewById(targetTab);
//		      		targetWebview.show();
//		      		curWebview.hide();
//					// 获取当前页面的父页面（创建它的页面）
//					var index = plus.webview.getLaunchWebview();
////					var index = curWebview.opener();
//		      		// 在父页面执行JS，激活父页面中对应选择卡，修改标题
//					index.evalJS("document.getElementById('chat.html').classList.remove('mui-active');document.getElementById('" + targetTab + "').classList.add('mui-active');document.getElementById('title').innerHTML='" + targetTabTitle + "';");
//					// 刷新chat页面 
//					refreshChatList();
//		     	};
		      	document.querySelector('body').addEventListener('swipeleft',function(e){
		      		changeTab('chat.html','setting.html','设置');
		      	});
		      	document.querySelector('body').addEventListener('swiperight',function(e){
		      		changeTab('chat.html','home.html','首页');
		      	});
		      	
		      	// 监听搜索框输入事件
		      	var searchInput = document.getElementById('search');
		      	searchInput.addEventListener('input', function(e){
		      		// 获取搜索框内容
		      		var name = searchInput.value;
		      		// 输入空串不做处理
		      		if (name.replace(/^\s\s*/, '').replace(/\s\s*$/, '') === ''){
		      			mui('#popover').popover('hide');
		      			return ;
		      		}
		      		// 先隐藏之前的弹出菜单
		      		mui('#popover').popover('hide');
		      		// 获取当前登录用户名
		      		var curUsername = app.getState().name;
		      		// 模糊匹配指定用户名
					mui.getJSON('http://ihealth.yangyingming.com/api/v1/userlist?name=' + name + '&selfname=' + curUsername + '&limit=10',function(data){
						var searchResult = document.getElementById('popover');
						// 根据模板将数据渲染成 HTML
						var html = template('search-template', {'items':data});
						if (html.replace(/^\s\s*/, '').replace(/\s\s*$/, '') === ''){
							html = '<div style="text-align:center;margin:10px;font-size:14px;">没有找到这个人耶  ┑(￣Д ￣)┍</div>'; 
							if (name == curUsername){
								html = '<div style="text-align:center;margin:10px;font-size:14px;">这是你自己耶 (๑•́ ₃ •̀๑) </div>';
							}
						}
						// 将HTML插入到弹出菜单中
						searchResult.innerHTML = html;
						// 显示弹出菜单
		      			mui('#popover').popover('toggle',document.getElementsByTagName('header')[0]);
//		      			mui('#popover').popover('show');
					});
		      	});
		      	
		      	// 监听搜索结果点击事件
			    document.querySelector('body').addEventListener('tap',function (e) {
			    	// 点击每个 card 上的 标题、图片、文字简介 时，捕获事件
			    	// 获取选中用户的 id
			    	var id = null;
				    if ( e.target.parentNode.classList.contains('mui-card-header') ){
				    	id = e.target.parentNode.getAttribute('id');
				    }
				    else if( e.target.parentNode.className == 'mui-media-body' ){
				    	id = e.target.parentNode.parentNode.getAttribute('id');
				    }
				    else{
				    	// 没有捕获到事件，直接退出
				    	return ;
				    }
				    // 响应捕获事件，打开聊天页面
				    // 将聊天对象id存入本地
				    var settings = app.getSettings();
				    // 如果换到新的聊天用户，清空原来的聊天记录
				    if(settings.imTargetID != id){
				    	var imWebview = plus.webview.getWebviewById('im.html');
				    	imWebview.evalJS("document.getElementById('msg-list').innerHTML = '';pretime = new Date(0);");
				    }
				    settings.imTargetID = id;
				    app.setSettings(settings);
				    // 收回弹出的软键盘
					document.activeElement.blur();
					// 打开聊天页面 
					mui.openWindow({
						url:'im.html',
						id:'im.html'
					});
				});
				
			});
		</script>
	</body>

</html>